<template>
	
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		
		<view class="d-row d-ai-centen d-jc-between width100 u-font-20">
			<view class="u-font-50">111</view>
			<view class="u-font-36">222</view>
			<view class="u-font-12 c-m-l-20">333</view>
		</view>

		<view class="wrap">
			<u-switch v-model="checked"></u-switch>
		</view>
		
		<u-input v-model="value" :type="type" :border="border" />
		
		<u-search placeholder="日照香炉生紫烟" ></u-search>
		
		<view class="width10 c-h-100 bg-blue c-line-height-100" @click="acitonClick">
			测试action异步提交
		</view>
		
		<view class="width10 height50 bg-blue c-m-t-50 c-h-200 c-l-h-200" @click="acitonClick2">
			测试action异步提交22
		</view>
		
		<c-button bgColor="#d5393c" color="#ffffff" width="400" height="200" > dsads </c-button>
	</view>
	
</template>

<script>
	import {mapState,mapActions} from 'vuex'; 
	export default {
		computed: { ...mapState(['userInfo','WebScoket']) },
		data() {
			return {
				title: 'Hello',
				checked:true,
				value: '',
				type: 'text',
				border: true
			}
		},
		onLoad() {

		},
		methods: {
			acitonClick(){
				console.log("userInfo-11---",JSON.stringify(this.userInfo,null,2))
				
				let userInfo = {
						username:'柳逸尘',
						address:'上海浦东',
						phone:'18637815946'
				}
				
				this.$store.dispatch('setUserInfo',userInfo)
				
				console.log("userInfo-222---",JSON.stringify(this.userInfo,null,2))
				
			},
			acitonClick2(){
				this.$store.dispatch('getUserInfo')
				.then(res =>{
					console.log("userInfo22-res",res)
				})
				
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
